<template>
	<view class="flex-col page">
		<!-- <u-navbar title="设备列表" bgColor="#f4d8c2" :autoBack="true" :placeholder="true">
		</u-navbar> -->
		<u-navbar title="设备列表" bgColor="rgba(0,0,0,0)" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="flex-col justify-start group">
			<view class="flex-col section">
				<view class="flex-col">
					<view class="flex-col group_2">
						<view class="flex-row justify-center items-center" @click="openDataPop">
							<text class="font text_2" v-if="startTime == ''">请选择日期</text>
							<text class="font text_2" v-else>{{startTime}}-{{endTime}}</text>
							<image class="image_5 ml-3"
								src="https://shops.cg500.com/static/aijiu/arrow-bottom-black.png" />
						</view>
						<view class="flex-col justify-start section_3 mt-21-5">
							<view class="flex-row equal-division">
								<view class="flex-col group_3 equal-division-item">
									<text class="self-center font_2">{{totalMoney}}</text>
									<view class="mt-12 flex-row justify-center self-stretch relative">
										<image class="image_8"
											src="https://shops.cg500.com/static/aijiu/total-money-icon.png" />
										<text class="font_3 ml-3">总收入</text>
									</view>
								</view>
								<view class="section_4 horiz-divider"></view>
								<view class="flex-col group_3 equal-division-item">
									<text class="self-center font_2">{{useNum}}</text>
									<view class="flex-row justify-center self-stretch relative mt-10-5">
										<image class="shrink-0 image_6"
											src="https://shops.cg500.com/static/aijiu/use-num-icon.png" />
										<text class="ml-2 font_3 ">使用次数</text>
									</view>
								</view>
								<view class="section_4 horiz-divider"></view>
								<view class="flex-col group_3 equal-division-item">
									<text class="self-center font_2">{{jbNum}}</text>
									<view class="flex-row justify-center self-stretch relative mt-11">
										<image class="image_7"
											src="https://shops.cg500.com/static/aijiu/jingbao-icon.png" />
										<text class="ml-2 font_3">警报</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view @click="toStatus(item.order_id,item.cusdevice_no)"
			class="flex-row justify-between items-center section_5 view_4" v-for="(item,index) in list" :key="index">
			<view class="group_4 view">
				<text class="font_4 text_3">设备编号</text>
				<text class="font text_4">{{item.cusdevice_no}}</text>
			</view>
			<view class="group_4 view_5">
				<text class="font_4 text_5">设备状态</text>
				<text class="font_5 text_6" v-if="item.status == '5'">工作中</text>
				<text class="font text_6 text_7" v-if="item.status == '32'">待机中</text>
				<text class="font_5 text_6" v-if="item.status == '13'">预热中</text>
				<text class="font_5 text_6" v-if="item.status == '16'">冷却中</text>
				<text class="font_5 text_6 text_8" v-if="item.status == '258'">警报</text>
				<text class="font_5 text_6 text_8" v-if="item.status == '-1'">异常</text>
			</view>
		</view>
		<u-popup :show="timeShow" :closeOnClickOverlay="true" @close="close">
			<view>
				<VueCalendar multiple isClick :signList="['2022-05-28']" @multipleDay="multipleDay" />
			</view>
		</u-popup>

		<!-- <u-calendar :show="timeShow" mode="range" allowSameDay="true" min-date="2024-01-01" max-date="2050-01-01" monthNum="100" @confirm="confirm" color="#78510b"></u-calendar> -->
		<!-- <u-calendar :show="timeShow" mode="range" allowSameDay="true" min-date="2024-01-01" max-date="2050-01-01" monthNum="10" @confirm="confirm" color="#78510b"></u-calendar> -->

	</view>
</template>

<script>
	import VueCalendar from '@/components/vue-calendar/vue-calendar.vue'
	const app = getApp().globalData;
	export default {
		components: {
			VueCalendar
		},
		data() {
			return {
				list: [],
				// list: [
				// 	{
				// 		eqNo: '3987429857',
				// 		status: 0,//0工作中 1待机中 2预热中 3冷却中 4警报
				// 	},
				// 	{
				// 		eqNo: '3987429857',
				// 		status: 1,//0工作中 1待机中 2预热中 3冷却中 4警报
				// 	},
				// 	{
				// 		eqNo: '3987429857',
				// 		status: 2,//0工作中 1待机中 2预热中 3冷却中 4警报
				// 	},
				// 	{
				// 		eqNo: '3987429857',
				// 		status: 3,//0工作中 1待机中 2预热中 3冷却中 4警报
				// 	},
				// 	{
				// 		eqNo: '3987429857',
				// 		status: 4,//0工作中 1待机中 2预热中 3冷却中 4警报
				// 	}
				// ],
				timeShow: false,
				mode: 'date',
				startTime: '',
				endTime: '',
				shop_id: '', //店铺id
				totalMoney: 0, //总收入
				useNum: 0, //使用次数
				jbNum: 0, //警报次数
			}
		},
		onLoad(options) {
			this.shop_id = options.shopId
			this.getEqumList()
		},
		methods: {
			close() {
				this.timeShow = false;
			},
			multipleDay(e) {
				console.log(e, 'multipleDay')
				this.startTime = e[0];
				this.endTime = e[e.length - 1];
				this.timeShow = false;
				this.getEqumList()
			},
			getEqumList() {
				var _this = this;
				uni.request({
					url: app.post_url + '/aijiu/api.Shop/eqList',
					data: {
						shop_id: this.shop_id,
						date_start: this.startTime,
						date_end: this.endTime
					},
					header: {
						'content-type': 'application/json'
					},
					method: 'post',
					success(res) {
						if (res.data.code == 1) {
							_this.list = res.data.data.list
							_this.totalMoney = res.data.data.money
							_this.useNum = res.data.data.order_num
							_this.jbNum = res.data.data.alarm
						}
					},
					fail(res) {
						uni.showToast({
							title: res.data.info,
							icon: 'none'
						})

					}
				})
			},
			openDataPop() {
				this.timeShow = true
			},
			confirm(e) {
				console.log(e);
				this.startTime = e[0];
				this.endTime = e[e.length - 1];
				this.timeShow = false;
				this.getEqumList()
			},
			toStatus(orderId, cusdeviceNo) {
				// uni.navigateTo({
				// 	url: '/pages/shop/equipmentStatus/index?orderId=' + orderId + '&cusdeviceNo=' + cusdeviceNo
				// })
				uni.navigateTo({
					url: '/pages/shop/equipmentStatus/index?orderId=' + orderId+ '&enterType=2'
				})
			}
		}
	}
</script>

<style>
	@import "@/common/css/common.css";

	.mt-18-5 {
		margin-top: 37rpx;
	}

	.ml-61-5 {
		margin-left: 123rpx;
	}

	.mt-25 {
		margin-top: 50rpx;
	}

	.mt-21-5 {
		margin-top: 43rpx;
	}

	.mt-10-5 {
		margin-top: 21rpx;
	}

	.ml-3 {
		margin-left: 6rpx;
	}

	.mt-11 {
		margin-top: 22rpx;
	}

	.page {
		padding-bottom: 460rpx;
		/* background-color: #f5f5f5; */
		background-image: linear-gradient(0deg, #f5f5f5 0%, #f5f5f5 12%, #f4d7c0 100%);
		background-repeat: no-repeat;
		background-size: 100% 600rpx;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		/* padding-bottom: 86rpx; */
	}

	.section {
		padding: 33rpx 20rpx 20rpx;
		/* background-image: linear-gradient(0deg, #f5f5f5 0%, #f5f5f5 12%, #f4d7c0 100%); */
	}

	.image {
		margin-left: 40rpx;
		margin-right: 15rpx;
		width: 655rpx;
		height: 24rpx;
	}

	.image_2 {
		width: 20rpx;
		height: 35rpx;
	}

	.text {
		color: #222222;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.section_2 {
		padding: 14rpx 27rpx;
		background-color: #ffffffa6;
		border-radius: 31.98rpx;
		height: 65rpx;
	}

	.image_3 {
		width: 62rpx;
		height: 38rpx;
	}

	.image_4 {
		width: 35rpx;
		height: 35rpx;
	}

	.group_2 {
		padding: 0 7rpx 34rpx;
	}

	.font {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		color: #151515;
	}

	.text_2 {
		line-height: 20rpx;
	}

	.image_5 {
		width: 15rpx;
		height: 10rpx;
	}

	.section_3 {
		margin-right: 6rpx;
		padding: 30rpx 0 23rpx;
		background-color: #78510b;
		border-radius: 16rpx;
	}

	.equal-division {
		padding: 0 26rpx;
	}

	.group_3 {
		flex: 1 1 213.26rpx;
	}

	.equal-division-item {
		padding: 10rpx 36rpx 10rpx 40rpx;
	}

	.font_2 {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		color: #ffffff;
	}

	.image_8 {
		width: 23rpx;
		height: 23rpx;
	}

	.section_4 {
		margin: 14rpx 0 21rpx;
	}

	.horiz-divider {
		opacity: 0.47;
		background-image: linear-gradient(0deg, #f5f5f5 0%, #ffffff 100%);
		width: 1rpx;
		height: 60rpx;
	}

	.image_6 {
		width: 25rpx;
		height: 25rpx;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		color: #ffffff;
	}

	.pos {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.pos_2 {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.image_7 {
		width: 22rpx;
		height: 24rpx;
	}

	.pos_3 {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.section_5 {
		padding: 46rpx 26rpx;
		background-color: #ffffff;
		border-radius: 16rpx;

	}

	.pos_4 {
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		top: 454rpx;
	}

	.group_4 {
		height: 25rpx;
	}

	.view {
		line-height: 26rpx;
	}

	.font_4 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		color: #999999;
	}

	.text_3 {
		line-height: 25rpx;
	}

	.text_4 {
		margin-left: 18rpx;
	}

	.view_2 {
		line-height: 26rpx;
	}

	.text_5 {
		line-height: 25rpx;
	}

	.font_5 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		color: #df9a64;
	}

	.text_6 {
		margin-left: 18rpx;
	}

	.pos_5 {
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		top: 602rpx;
	}

	.view_3 {
		margin-right: 8rpx;
		line-height: 25rpx;
	}

	.text_7 {
		line-height: 25rpx;
	}

	.view_4 {
		margin: 0 30rpx;
		margin-bottom: 30rpx;
	}

	.view_5 {
		line-height: 26rpx;
		width: 34%;
		text-align: left;
	}

	.view_6 {
		margin: 30rpx 30rpx 0;
	}

	.view_7 {
		line-height: 26rpx;
	}

	.view_8 {
		margin: 30rpx 30rpx 0;
	}

	.view_9 {
		margin-right: 34rpx;
		line-height: 25rpx;
	}

	.text_8 {
		color: #e4334a;
		line-height: 25rpx;
	}
</style>